<template>
    <div class="MainLook">
        <el-container class="main">
            <el-header class="mainHead">
                <NavTenYear></NavTenYear>
            </el-header>
             <el-container class="mainContainer">
                <el-aside class="newUpdateBlock" width="400px">
                    <div class="newDetail">
                        <el-container>
                            <el-header>
                                <div class="title">
                                    <div class="ch">最近更新</div>
                                    <div class="en">Recent updates</div>
                                </div>
                            </el-header>
                            <el-main class="SmallNewDetail">
                                <SmallNewDetail v-for="index in rightTopListLength" :key="index" @click.native="goDetail(rightTopList[index-1].article_id);ClickAdd(rightTopList[index-1].article_id)" :config="rightTopList[index-1]"></SmallNewDetail>
                            </el-main>
                        </el-container>
                    </div>
                    <div class="newComment">
                        <el-container>
                            <el-header>
                                <div class="title">
                                    <div class="ch">最新评论</div>
                                    <div class="en">Recent Comment</div>
                                </div>
                            </el-header>
                            <el-main class="SmallNewComment">
                                <el-timeline>
                                    <el-timeline-item
                                    v-for="(val) in rightBottomList"
                                    :key="val.comment_id"
                                    :timestamp="val.create_time | dayFix3" 
                                    placement="top">
                                    <el-card>
                                        <span class="name">{{val.user_nick_name}}</span>
                                        <span class="detail" @click="goNewComment(val.article_id,val.floor)">{{val.content}}</span>
                                    </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </el-main>
                        </el-container>
                    </div>
                </el-aside>
                <el-main class="DetailsBlock">
                    <el-header class="breadNav" style="height:250px">
                        <el-row class="titleAndSearch" type="flex">
                            <el-col :span="4">
                                <div class="title">文章列表</div>
                                <p>Article list</p>
                            </el-col>
                            <el-col :span="4" :offset="9" class="input">
                                <el-autocomplete
                                v-model="state"
                                placeholder="请输入内容"
                                :fetch-suggestions="querySearchAsync"
                                @select="handleSelect"
                                @keydown.enter.native="SelectLike"
                                >
                                </el-autocomplete>
                            </el-col>
                            <el-col :span="4" :offset="0">
                                <div class="button" @click="SelectLike" >搜索</div>
                            </el-col>
                        </el-row>
                        <el-row class="time" type="flex" >
                            <el-col :span="1">
                                时间
                            </el-col>
                            <el-col :span="2">
                                time
                            </el-col>
                            <el-col :span="1" :offset="1">
                                <div class="block">
                                    <el-date-picker
                                    v-model="dayTime"
                                    type="month"
                                    @blur="searchBaseTime"
                                    value-format="yyyy-MM"
                                    placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="tags" type="flex">
                            <el-col :span="1">
                                板块
                            </el-col>
                            <el-col :span="2">
                                tags
                            </el-col>
                            <el-row :span="2" type="flex" class="fourBlock" ref="fourBlock">
                                <el-col :span="3" :offset="1" @click.native="choiceBlock" :data-ifChoice="false">
                                    十年
                                </el-col>
                                <el-col :span="3" :offset="1"  @click.native="choiceBlock" :data-ifChoice="false">
                                    生死
                                </el-col>
                                <el-col :span="3" :offset="1"  @click.native="choiceBlock" :data-ifChoice="false">
                                    抉择
                                </el-col>
                                <el-col :span="3" :offset="1"  @click.native="choiceBlock" :data-ifChoice="false">
                                    铭刻
                                </el-col>
                            </el-row>
                        </el-row>
                        <el-row class="sort" type="flex">
                            <el-col :span="1">
                                排序
                            </el-col>
                            <el-col :span="2">
                                sort
                            </el-col>
                            <el-row :span="2" type="flex" class="sortWay" ref="sort">
                                <el-col class="el-col-click" :span="2" :offset="1" @click.native="choiceSort" data-way="0">
                                    默认
                                </el-col>
                                <el-col :span="2" :offset="1"  @click.native="choiceSort" data-way="1">
                                    最多点击
                                </el-col>
                                <el-col :span="2" :offset="1"  @click.native="choiceSort" data-way="2">
                                    最多点赞
                                </el-col>
                                <el-col :span="2" :offset="1"  @click.native="choiceSort" data-way="3">
                                    最多收藏
                                </el-col>
                                <el-col :span="2" :offset="1"  @click.native="choiceSort" data-sort="desc">
                                    倒序
                                </el-col>
                            </el-row>
                        </el-row>
                    </el-header>
                    <el-main class="Details">
                        <SmallBlock v-for="index in count" :key="index" :config="blockList[index-1]"></SmallBlock>
                    </el-main>
                    <el-footer class="pagination">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-count="totalPage"
                            @current-change="changePage"
                            @prev-click="beforePage"
                            @next-click="nextPage"
                            >
                        </el-pagination>
                    </el-footer>
                </el-main>
            </el-container>.
            <el-footer>
                <AnotherFooter></AnotherFooter>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
import { nanoid } from 'nanoid';
import SmallNewDetail from './SmallNewDetail'
export default {
    name:'MainLook',
    data() {
      return {
        restaurants: [],
        state: '',
        timeout:  null,
        dayTime: '',
        activity:['2022-1-22','卢本伟之天下'],
        flag:true,//防止短时间多次请求
        page:1,
        totalPage:10,
        tags:[], //已选择的板块
        sort:'create_time',
        way:'desc',
        blockList:[],
        count:0,
        rightTopList:[],
        rightTopListLength:5,
        rightTopListFlag:true,
        rightBottomList:[]
      };
    },
    created(){
        this.sendReq();
        //最新评论获取
        this.$store.dispatch('base/reqNewComments').then((result)=>{
            if(result.data.status == '200'){
                this.rightBottomList = result.data.data
            }
        });
    },
    methods: {
        querySearchAsync(queryString, cb) {
            this.$store.dispatch('base/reqSearch', queryString).then((result)=>{
                this.restaurants = result.data.data
                let restaurants = this.restaurants;
                let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                cb(results);
                }, 800);
            });
        },
        createStateFilter(queryString) {
            return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            if(this.flag){
                this.flag = false
                this.page = 1;
                this.tags.splice(0,this.tags.length);
                this.dayTime = '';
                [...this.$refs.fourBlock.$el.children].forEach(element => {
                    element.classList.remove('el-col-click')
                });
                this.$store.dispatch('base/reqSearchTrue', this.state).then((result)=>{
                    this.blockList.splice(0,this.blockList.length,...result.data.data)
                    this.count = result.data.data.length
                    this.totalPage = result.data.totalPage
                    this.flag = true;
                });
            }else{
                this.$message({
                    message: '你点太快了',
                    type: 'error'
                });
            }
        },
        //搜索按钮专属模糊查询
        SelectLike(){
            if(this.flag){
                this.flag = false
                this.page = 1;
                this.tags.splice(0,this.tags.length);
                this.dayTime = '';
                [...this.$refs.fourBlock.$el.children].forEach(element => {
                    element.classList.remove('el-col-click')
                });
                this.sendReq();
            }else{
                this.$message({
                    message: '你点太快了',
                    type: 'error'
                });
            }
        },
        //模块查询
        choiceBlock(event){
            if(this.flag){
                this.flag = false
                if(event.target.classList.contains('el-col-click')){
                    //进行查找带有该参数
                    this.tags.splice(this.tags.indexOf(event.target.innerText),1);
                }else{
                    this.tags.push(event.target.innerText)
                    //去掉该参数进行查找
                }
                event.target.classList.toggle('el-col-click');
                this.sendReq();
            }else{
                this.$message({
                    message: '你点太快了',
                    type: 'error'
                });
            }
        },
        //排序查询
        choiceSort(event){
            if(this.flag){
                this.flag = false
                let arr = this.$refs.sort.$el.children
                if(event.target.getAttribute('data-way') == 0) this.sort = 'create_time'
                else if(event.target.getAttribute('data-way') == 1) this.sort = 'clicks'
                else if(event.target.getAttribute('data-way') == 2) this.sort = 'likes'
                else if(event.target.getAttribute('data-way') == 3) this.sort = 'starts'
                else{
                    if(!event.target.classList.contains('el-col-click')){
                        this.way = 'asc'; //asc
                    }else{
                        this.way = 'desc'
                    }
                }
                if(!event.target.getAttribute('data-sort')){
                    for(let i = 0 ;i<arr.length-1;i++){
                        arr[i].classList.remove('el-col-click')
                    }
                }
                event.target.classList.add('el-col-click')
                if(event.target.getAttribute('data-sort')){
                    if(event.target.getAttribute('data-sort') == 'desc'){
                        // console.log('desc');
                        event.target.setAttribute('data-sort','asc');
                    }else{
                        // console.log('asc');
                        event.target.setAttribute('data-sort','desc');
                        event.target.classList.remove('el-col-click')
                    }
                }
                //发送请求
                this.sendReq();
            }else{
                this.$message({
                    message: '你点太快了',
                    type: 'error'
                });
            }
        },
        //时间查询
        searchBaseTime(){
            if(this.flag){
                this.flag = false
                this.sendReq();
            }else{
                this.$message({
                    message: '你点太快了',
                    type: 'error'
                });
            }
        },
        //分页器查询
        changePage(nowPage){
            this.page = nowPage
            this.sendReq()
        },
        beforePage(nowPage){
            this.page = nowPage
            this.sendReq()
        },
        nextPage(nowPage){
            this.page = nowPage
            this.sendReq()
        },
        goNewComment(id,floor){
            this.$router.push({
                name:'Detail',
                query:{from:`${this.$route.path.substr(1)}`,id,fix:nanoid(5),floor},
            })
        },
        goDetail(id){
            let routeUrl = this.$router.resolve({
                name:'Detail',
                query:{from:`${this.$route.path.substr(1)}`,id,fix:nanoid(5)},
            })
            window.open(routeUrl.href, '_blank');
         },
        //点击量增加
        ClickAdd(id){
            this.$store.dispatch('base/reqClickAdd', id);
        },
    },
    computed: {
        sendReq() {
            return ()=>{
                let obj = {
                    time:this.dayTime,
                    page:this.page,
                    tags:this.tags,
                    sort:this.sort,
                    way:this.way,
                    title:this.state
                }
                this.$store.dispatch('base/reqSearchAll', obj).then((result)=>{
                    if(result.data.status == '200'){
                        this.blockList.splice(0,this.blockList.length,...result.data.data)
                        this.count = result.data.data.length
                        this.totalPage = result.data.totalPage
                        //右侧列表上
                        if(this.rightTopListFlag){
                            this.rightTopList.splice(0,this.rightTopList.length,...this.blockList)
                            this.rightTopListLength = this.rightTopList.length
                            this.rightTopListFlag = false
                        }
                    }else{
                        this.$message({
                            message: '服务器错误',
                            type: 'error'
                        });
                    }
                    this.flag = true;
                });
            }
        },
    },
    mounted() {
        this.$store.dispatch('base/reqSearch', '').then((result)=>{
            this.restaurants = result.data.data
        })
    },
    components: { SmallNewDetail },
}
</script>

<style lang="less">
    .MainLook{
        background-color: #ececec;
        .mainHead{
            padding: 0px;
        }
        .mainContainer{
            .newUpdateBlock{
                order: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                .newDetail,.newComment{
                    width: 80%;
                    height: 600px;
                    border: 2px solid black;
                    border-radius:1em ;
                    margin-top: 20px;
                    background-color: white;
                    box-shadow: 10px 10px 0px rgb(48, 43, 43);
                }
                .newDetail{
                    .el-container{
                        .el-header{
                            position: relative;
                            .title{
                                position: absolute;
                                top: 20px;
                                &>.ch{
                                    font-size: 35px;
                                }
                                &>.en{
                                    font-size: 20px;
                                }
                            }
                        }
                        .SmallNewDetail{
                            padding-left:0px; 
                        }
                    }
                }
                .newComment{
                    .el-container{
                        .el-header{
                            position: relative;
                            .title{
                                position: absolute;
                                top: 20px;
                                &>.ch{
                                    font-size: 35px;
                                }
                                &>.en{
                                    font-size: 20px;
                                }
                            }
                        }
                    }
                    .SmallNewComment{
                        .el-timeline{
                            .el-timeline-item{
                                .el-timeline-item__wrapper{
                                    .el-timeline-item__content{
                                        .el-card{
                                            width: 15vw;
                                            .el-card__body{
                                                display: flex;
                                                flex-direction: column;
                                                .name{
                                                    font-size: 25px;
                                                }
                                                .detail{
                                                    white-space: nowrap;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    &:hover{
                                                        color: red;
                                                        cursor: pointer;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .el-timeline-item__timestamp{
                                        font-size: 18px;
                                    }
                                }
                            }
                        }
                    }

                }
            }
            .DetailsBlock{
                background-color: white;
                border: 2px solid black;
                margin: 20px;
                border-radius:2rem ;
                box-shadow: 10px 10px 0px rgb(48, 43, 43);
                overflow-x: hidden;
                .breadNav{
                    .titleAndSearch{
                        .title{
                            width: 200px;
                        }
                        justify-content: space-between;
                        &:first-child{
                            font-size: 35px;
                            user-select: none;
                            p{
                                font-size:20px ;
                                width: 200px;
                            }
                        }
                        .input{
                            width: 22vw;
                            .el-autocomplete{
                                .el-input {
                                    .el-input__inner{
                                        border: 2px solid black;
                                        font-family: 'QNHGXK';
                                        color: black;
                                        font-size: 18px;
                                        width: 22vw;
                                    }
                                    .el-input__inner::-webkit-input-placeholder { // 谷歌内核
                                        font-size: 18px;
                                        font-family: 'QNHGXK';
                                        color: rgb(31, 26, 26);
                                    }
                                }
                            }
                        }
                        .button{
                            outline: none;
                            height: 40px;
                            width: 80px;
                            border: 2px solid black;
                            background-color:white ;
                            box-sizing: border-box;
                            line-height: 40px;
                            text-align: center;
                            margin-left:20px ;
                            font-size:18px ;
                            cursor: pointer;
                            border-radius: 5px;
                            transform: translateY(4px);
                        }
                    }
                    .time{
                        margin-top: 20px;
                        .el-col{
                            user-select: none;
                            font-size: 25px;
                            width: 50px;
                            height: 40px;
                            line-height: 40px;
                            .block{
                                .el-input__inner{
                                    border: 2px solid black;
                                    font-family: 'QNHGXK';
                                    color: black;
                                    font-size: 18px;
                                }
                            }
                        }
                    }
                    .tags{
                        margin-top: 20px;
                        .el-col{
                            user-select: none;
                            font-size: 25px;
                            width: 50px;
                            height: 40px;
                            line-height: 40px;
                        }
                        .fourBlock{
                            margin-left: 30px;
                            .el-col{
                                text-align: center;
                                font-size: 20px;
                                height: 40px;
                                border: 2px solid black;
                                box-sizing: border-box;
                                border-radius: 2em;
                                width: 120px;
                                cursor: pointer;
                            }
                            .el-col-click{
                                border-inline: 4px solid white !important;
                                color: white !important;
                                background-color: black !important;
                            }
                        }
                    }
                    .sort{
                         margin-top: 20px;
                        .el-col{
                            user-select: none;
                            font-size: 25px;
                            width: 50px;
                            height: 40px;
                            line-height: 40px;
                        }
                        .sortWay{
                            margin-left: 22px;
                            .el-col{
                                text-align: center;
                                font-size: 20px;
                                height: 40px;
                                border: 2px solid black;
                                box-sizing: border-box;
                                border-radius: 2em;
                                width: 130px;
                                cursor: pointer;
                            }
                            .el-col-click{
                                border-inline: 4px solid white !important;
                                color: white !important;
                                background-color: black !important;
                            }
                        }
                    }
                }
                .Details{
                    width: 100%;
                    height: 1020px;
                    overflow-x: hidden;
                }
                .pagination{
                    display: flex;
                    justify-content: center;
                    .el-pagination {
                        height: 40px;
                        ul{
                            height: 40px;
                            li{
                                height: 40px;
                                width: 40px;
                                font-size: 20px;
                                line-height: 40px;
                            }
                            .active{
                                background-color: black;
                            }
                        }
                        button{
                            height: 40px;
                            width: 40px;
                            font-size: 20px;
                            line-height: 40px;
                        }
                    }
                }
            }
        }
    }
</style>